<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />

      <!-- 搜索业务-->
      <el-input v-model="query.productName" clearable placeholder="输入搜索产品名称" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
      <el-input v-model="query.title" clearable placeholder="输入搜索标题" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
      <el-select v-model="query.status" clearable placeholder="请选中状态" class="filter-item" style="width: 200px">
              <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
      <!-- 新增 -->
      <el-button
        v-permission="['admin','atBusiness:add']"
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="add"
      >新增</el-button>
      <el-button
        type="danger"
        class="filter-item"
        size="mini"
        icon="el-icon-refresh"
        @click="toQuery"
      >刷新</el-button>

      <!--表单组件-->
      <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="title" width="800px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px" >
          <el-form-item label="主题">
            <el-input v-model="form.title" style="width: 370px;" />
          </el-form-item>
         <!-- <el-form-item label="编码">
            <el-input v-model="form.code" style="width: 370px;" />
          </el-form-item> -->
          <el-form-item label="主图">
            <!-- <el-input v-model="form.mainUrl" style="width: 370px;" /> -->
             <MaterialList v-model="form.urlArr" style="width: 300px" type="image" :num="1" :width="150" :height="150" />
          </el-form-item>
       <!--   <el-form-item label="颜色">
            <el-select v-model="form.color" clearable placeholder="请选中颜色" class="filter-item" style="width: 370px">
              <el-option v-for="item in colorList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="原色积分数量">
            <el-input v-model="form.primaryColor" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="异色积分数量">
            <el-input v-model="form.differentColor" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="特殊积分数量">
            <el-input v-model="form.specialColor" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="人物积分数量">
            <el-input v-model="form.figure" style="width: 370px;" />
          </el-form-item>
         <!-- <el-form-item label="积分数">
            <el-input v-model="form.points" style="width: 370px;" />
          </el-form-item> -->
         <!-- <el-form-item label="推荐上首页" >
            <el-radio v-model="form.topIndex" :label="0" >不推荐</el-radio>
            <el-radio v-model="form.topIndex" :label="1">推荐</el-radio>

          </el-form-item> -->
          <el-form-item label="状态">
            <el-select v-model="form.status" clearable placeholder="请选中状态" class="filter-item" style="width: 370px">
              <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="cancel">取消</el-button>
          <el-button :loading="loading" type="primary" @click="submit">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table v-loading="loading" :data="data" size="small" style="width: 100%;align-items: center;">
        <el-table-column type="selection" width="55" />
          <el-table-column type="index" width="55" label="序号">
              <template scope="scope">
                <span>{{((page+1) - 1) * size + scope.$index + 1}}</span>
                </template>
            </el-table-column>
        <el-table-column  prop="title" label="标题" />
        <el-table-column prop="url" label="主图" >
           <template slot-scope="scope">
               <el-image
                     style="width: 80px; height: 80px"
                     :src="scope.row.url"
                     :preview-src-list="[scope.row.url]"
                   ></el-image>
            </template>
        </el-table-column>
        <!-- <el-table-column  prop="urls" label="轮播图" /> -->
         <el-table-column  prop="primaryColor" label="原色积分数量" />
          <el-table-column  prop="differentColor" label="异色积分数量" />
           <el-table-column  prop="specialColor" label="特殊色积分数量" />
            <el-table-column  prop="figure" label="人物积分数量" />
        <el-table-column prop="status" label="状态" >
           <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0" style="cursor: pointer" :type="'info'">关闭</el-tag>
            <el-tag v-if="scope.row.status == 1" style="cursor: pointer;color: green;" :type="'info'">开启</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column  prop="content" label="图文内容" /> -->
        <el-table-column  prop="createTime" label="创建时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column  prop="updateTime" label="更新时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updateTime) }}</span>
          </template>
        </el-table-column>
       <el-table-column v-permission="['admin','atBusiness:edit','atBusiness:del']" label="操作" width="300px" align="center">
         <template slot-scope="scope">
           <el-button
             size="mini"
             type="primary"
             icon="el-icon-edit"
             @click="edit(scope.row)"
           >
             编辑
           </el-button>
           <el-popover
             :ref="scope.row.id"
             placement="top"
             width="180"
           >
             <p>确定删除本条数据吗？</p>
             <div style="text-align: right; margin: 0">
               <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
               <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
             </div>
             <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini">删除</el-button>
           </el-popover>
         </template>
       </el-table-column>
      </el-table>
      <!--分页组件-->
     <el-pagination
       :total="total"
       :current-page="page + 1"
       style="margin-top: 8px;"
       layout="total, prev, pager, next, sizes"
       @size-change="sizeChange"
       @current-change="pageChange"
     />
    </div>
  </div>
</template>

<script>

  import initData from '@/mixins/crud'
  import checkPermission from '@/utils/permission'
  import { add, edit,del } from '@/api/hcsFigure'

  import picUpload from '@/components/pic-upload'
  import MaterialList from '@/components/material'
  import UeditorWrap from 'vue-ueditor-wrap';

export default {
  mixins: [initData],
   components: { picUpload, MaterialList,UeditorWrap },
  data() {
    return {
         isAdd:true,
          loading: false, dialog: false,
          delLoading: false,
          title:"新增",
          form:{
            id: '',
            title: "",
            url:"",
            urlArr :[],
            primaryColor: 0,
            specialColor:0,
            differentColor:0,
            status:'',
            figure:0,
         },
         colorList:[
           {name:'原色',value:"原色"}, {name:'异色',value:"异色"}, {name:'特殊色',value:"特殊色"}
         ],
         statusList:[
           {name:'关闭',value:0}, {name:'开启',value:1}
         ],
         permission: {
           add: ['admin', 'hcsFigure:add'],
           edit: ['admin', 'hcsFigure:edit'],
           del: ['admin', 'hcsFigure:del']
         },
         rules: {
         },
         myConfig: {
           autoHeightEnabled: false, // 编辑器不自动被内容撑高
           initialFrameHeight: 500, // 初始容器高度
           initialFrameWidth: '100%', // 初始容器宽度
           UEDITOR_HOME_URL: '/UEditor/',
           serverUrl: ''
         }

      }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  watch: {
     'form.urlArr': function(val) {
      if (val) {
        this.form.url = val.join(',')
      }
    }
  },
  methods: {
       checkPermission,
       beforeInit() {
         this.url = 'api/hcsFigure'
         const sort = 'id,desc'
         this.params = { page: this.page, size: this.size, sort: sort }
         return true
       },

       add(){
         this.dialog = true
         this.isAdd = true
         // this.resetForm()
       },
       submit(){
         this.loading = true
         if (this.isAdd) {
           this.doAdd()
         } else this.doEdit()
       },
       refresh(){
         this.dialog = false
         this.form = {
          id: '',
          title: "",
          url:"",
          urlArr :[],
          primaryColor: '',
          specialColor:'',
          differentColor:0,
          status:'',
          figure:0,
         }
       },
       addCustomDialog () {
         window.UE.registerUI('yshop', function (editor, uiName) {
           let dialog = new window.UE.ui.Dialog({
             iframeUrl: '/yshop/materia/index',
             editor: editor,
             name: uiName,
             title: '上传图片',
             cssRules: 'width:1200px;height:500px;padding:20px;'
           });
           this.dialog = dialog;

           var btn = new window.UE.ui.Button({
             name: 'dialog-button',
             title: '上传图片',
             cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
             onclick: function () {
               dialog.render();
               dialog.open();
             }
           });

           return btn;
         }, 37);
       },
       cancel(){
         this.refresh()
         this.init()
       },
       doAdd() {
         this.title = "新增"
         add(this.form).then(res => {
           this.refresh()
           this.$notify({
             title: '添加成功',
             type: 'success',
             duration: 2500
           })
           this.loading = false
           this.init()
         }).catch(err => {
           this.loading = false
           console.log(err.response.data.message)
         })
       },
       doEdit() {

         edit(this.form).then(res => {
           this.refresh()
           this.$notify({
             title: '修改成功',
             type: 'success',
             duration: 2500
           })
           this.loading = false
           this.init()
         }).catch(err => {
           this.loading = false
           console.log(err.response.data.message)
         })
       },
       subDelete(id){
         this.delLoading = true
         let ids = [id]
         del(ids).then(res => {
            this.delLoading = false
            this.$refs[id].doClose()
           this.init()
         }).catch(err => {
           this.loading = false
         })
       },
       edit(data) {
         this.title = "编辑"
         this.isAdd = false
         this.form = {
           id: data.id,
           title: data.title,

           url: data.url,
           urlArr:data.url ? data.url.split(',') : [],
           primaryColor: data.primaryColor,
           specialColor:data.specialColor,
           differentColor:data.differentColor,
           status:data.status,
           figure:data.figure,
         }
         this.dialog = true
       }
  }
}



</script>

<style scoped>
  .table-img {
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
</style>
